<script setup lang="ts">
import { ref, h } from "vue";
import { useColumns } from "./columns";
import { IconifyIconOnline } from "@/components/ReIcon";
import { PlusDialogForm } from "plus-pro-components";
import type {
  PlusColumn,
  FieldValues,
  PlusFormInstance
} from "plus-pro-components";
import { message } from "@/utils/message";
import { dayjs, ElImage, ElInput, ElTag } from "element-plus";

const SERVER_URL = import.meta.env.VITE_SERVER_URL;

const tableRef = ref();

const {
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  searchText,
  onSizeChange,
  onCurrentChange,
  refresh,
  search
} = useColumns({
  onEdit: (row, index) => {
    formData.value = {
      id: row.id,
      created_on: row.created_on,
      openid: row.openid,
      nickname: row.nickname,
      level: row.level,
      avatar: row.avatar,
      phone: row.phone,
      gender: row.gender,
      last_login_time: row.last_login_time
    };

    formVisible.value = true;
  }
});

const formRules = {
  name: [
    {
      required: true,
      message: "请输入名称"
    }
  ]
};

const submitLoading = ref<boolean>(false);

const formColumns: PlusColumn[] = [
  {
    label: "昵称",
    width: 120,
    prop: "nickname",
    valueType: "input"
  },
  {
    label: "OpneID",
    width: 120,
    prop: "openid",
    valueType: "input"
  },
  {
    label: "头像",
    width: 120,
    prop: "avatar",
    valueType: "img",
    renderField(value, onChange) {
      console.log(value);
      return h(ElImage, {
        src: SERVER_URL + value,
        style: "width: 60px; height: 60px;"
      });
    }
  },
  {
    label: "会员",
    width: 120,
    prop: "level",
    valueType: "tag",
    renderField(value, onChange) {
      return h(ElTag, "普通会员");
    }
  },
  {
    label: "性别",
    width: 120,
    prop: "gender",
    valueType: "tag",
    renderField(value, onChange) {
      switch (value) {
        case 0:
          return h(ElTag, { type: "danger" }, "女");

        case 1:
          return h(ElTag, { type: "primary" }, "男");

        default:
          return h(ElTag, { type: "info" }, "未知");
      }
    },
    colProps: {
      span: 8
    }
  },
  {
    label: "手机号",
    width: 120,
    prop: "phone",
    valueType: "input"
  },
  {
    label: "注册日期",
    width: 120,
    prop: "created_on",
    valueType: "input",
    renderField(value: string, onChange) {
      return h(ElInput, {
        modelValue: dayjs(value).format("YYYY-MM-DD HH:mm:ss")
      });
    }
  }
];
const formVisible = ref(false);
const formData = ref<FieldValues>({});

const handleConfirm = () => {
  formVisible.value = false;
};

const handleSearch = e => {
  search();
};
</script>
<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between items-center">
          <span>客户管理</span>

          <el-space>
            <el-input
              v-model="searchText"
              style="width: 240px"
              clearable
              placeholder="请输入关键词"
              @change="handleSearch"
            >
              <template #append>
                <IconifyIconOnline icon="ep:search" />
              </template>
            </el-input>
            <!-- <el-button type="primary">
              <template #icon>
                <IconifyIconOnline icon="ep:plus" />
              </template>
              新增
            </el-button> -->
          </el-space>
        </div>
      </template>
      <pure-table
        ref="tableRef"
        border
        adaptive
        :adaptiveConfig="adaptiveConfig"
        row-key="id"
        alignWhole="center"
        showOverflowTooltip
        :loading="loading"
        :loading-config="loadingConfig"
        :data="dataList"
        :columns="columns"
        :pagination="pagination"
        @page-size-change="onSizeChange"
        @page-current-change="onCurrentChange"
      />
    </el-card>
    <PlusDialogForm
      v-model:visible="formVisible"
      v-model="formData"
      title="客户信息"
      width="480px"
      :form="{
        columns: formColumns,
        disabled: true,
        rules: formRules,
        labelPosition: 'top'
      }"
      @confirm="handleConfirm"
    />
  </div>
</template>
